<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/plugs/bootstrap-treeview/bootstrap-treeview.css">
    <link rel="stylesheet" href="/plugs/aip-doc/api-doc.css">
   <style type="text/css">
       .api-container{
           display: flex;
       }
       .icon-comm_2591:before {
           content: "\2591";
       }
   </style>

    <script type="text/javascript" src="/plugs/bootstrap-treeview/bootstrap-treeview.js"></script>
    <script type="text/javascript" src="/plugs/aip-doc/api-doc.js"></script>
</head>
<script type="text/javascript">
    $(function () {
        var array = ["/json/api/api-doc-iot.json","/json/api/api-doc-staff.json","/json/api/api-doc-student.json"];
        loadApi(array,{},0);
        event();
    });
    function loadApi(array,apis,index) {
       var timer;
       var request =  $.getJSON(array[index],function (data) {
            if(data   && data.length > 0){
                for(var i = 0 ; i < data.length ; i ++){
                    if(data[i] && (data[i].id || data[i].id == 0 )){
                        apis[data[i].id] = data[i];
                    }
                }
            }
            if(++index >= array.length){
                loadApiList(apis);
            }else {
                loadApi(array,apis,index);
            }
        });
        timer = setTimeout(function () {
            request.abort()
        }, 5000)
    }

    function loadApiList(apis) {
        $.getJSON("/json/api/api-doc-list.json",function (data) {
            for(var i  = 0 ; i < data.length ; i++){
                data[i].text = data[i].name;
            }
            var options = {
                levels: 2,
                data: Tree.toTree({data:data,rootId:0,id:"id",parentId:"pid",children : "nodes",sort:"sort"}),
                onNodeSelected : function (node,data) {
                    if(data.hasOwnProperty("nodes") && data.nodes && data.nodes.length > 0){ return ;  }
                    if(apis[data.id]){
                        apiDetails(apis[data.id]);
                    }
                }
            };
            $('#apiMenu').treeview(options);
        });
    }

    function apiDetails(data) {
        $("#apiView").apiDocument({
            data: data,
            isTree:true,
            toolbar : " <button id=\"mock\" type=\"button\" class=\"btn btn-dark\">MOCK</button>\n" +
                "         <button id=\"exportPhoto\" type=\"button\" class=\"btn btn-dark\">导出图片PDF</button>\n" +
                "         <button id=\"exportPDF\" type=\"button\" class=\"btn btn-dark\">导出PDF</button>"
        });
    }


    function event() {
        //mock
        $(".api-container").on("click","#mock",function () {
            var data =  $("#apiView").apiDocument("mock");
           BootstrapDialog.show({
                 title : "MOCK <span class='copy-icon'>拷贝</span>",
                 html:"<div><a id='copyMock' class='copy-icon'>拷贝</a></div><pre class='user-select: text;'><code>"+JSON.stringify(data,null,4)+"</code></pre>",
              });
        });



        //导出图片
        $(".api-container").on("click","#exportPhoto",function () {
            $("#apiView").bootstrapTreeTable("expandAll");
            html2canvas(document.querySelector("#api")).then(function (canvas) {
                var oImg = new Image();
                oImg.src = canvas.toDataURL();  // 导出图片
                //设置图片跨域访问
                oImg.crossOrigin = 'anonymous';
                $(oImg).css({ width: "100%", height: "100%",display: "none"});
                $(oImg).bootstrapViewer({ src: "src" });
                $(oImg).trigger("click");
            });
        });
    }
</script>
<body>
 <div class="api-container">
     <div  class="api-menu">
         <div id="apiMenu"></div>
     </div>
     <div class="api-view">
         <table id="apiView"></table>
     </div>
 </div>
</body>
</html>